package pages

import (
	"github.com/templui/templui/internal/ui/layouts"
	"github.com/templui/templui/internal/ui/modules"
	"github.com/templui/templui/internal/ui/showcase"
)

templ Dropdown() {
	@layouts.DocsLayout(
		"Dropdown",
		"Floating menu for displaying a list of actions or options. Uses Popover for the popup.",
		[]modules.TableOfContentsItem{
			{
				ID:   "installation",
				Text: "Installation",
			},
			{
				ID:   "api-reference",
				Text: "API Reference",
				Children: []modules.TableOfContentsItem{
					{
						ID:   "dropdown",
						Text: "Dropdown",
					},
					{
						ID:   "trigger",
						Text: "Trigger",
					},
					{
						ID:   "content",
						Text: "Content",
					},
					{
						ID:   "group",
						Text: "Group",
					},
					{
						ID:   "label",
						Text: "Label",
					},
					{
						ID:   "item",
						Text: "Item",
					},
					{
						ID:   "separator",
						Text: "Separator",
					},
					{
						ID:   "shortcut",
						Text: "Shortcut",
					},
					{
						ID:   "sub",
						Text: "Sub",
					},
					{
						ID:   "subtrigger",
						Text: "SubTrigger",
					},
					{
						ID:   "subcontent",
						Text: "SubContent",
					},
				},
			},
		},
	) {
		@modules.PageWrapper(modules.PageWrapperProps{
			Name:        "Dropdown",
			Description: templ.Raw("Floating menu for displaying a list of actions or options. Uses Popover for the popup."),
			Tailwind:    true,
			VanillaJS:   true,
			Breadcrumbs: modules.Breadcrumbs{
				Items: []modules.BreadcrumbItem{
					{
						Text: "Docs",
						Path: "/docs",
					},
					{
						Text: "Components",
						Path: "/docs/components",
					},
					{
						Text: "Dropdown",
					},
				},
			},
		}) {
			@modules.ExampleWrapper(modules.ExampleWrapperProps{
				ShowcaseFile:    showcase.DropdownDefault(),
				PreviewCodeFile: "dropdown_default.templ",
			})
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Installation",
				ID:    "installation",
			}) {
				@modules.ComponentUsage(modules.ComponentUsageProps{
					ComponentName: "dropdown",
					JSFiles:       []string{"dropdown", "popover"},
				})
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "API Reference",
				ID:    "api-reference",
			}) {
				@modules.APILegend()
				<div id="dropdown" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title: "Dropdown",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "randomID",
								Description: "Unique identifier for the dropdown (used internally for context)",
							},
						},
					})
				</div>
				<div id="trigger" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title: "Trigger",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "\"\"",
								Description: "Unique identifier for the trigger element",
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "\"\"",
								Description: "Additional CSS classes to apply to the trigger",
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "nil",
								Description: "Additional HTML attributes to apply to the trigger",
							},
						},
					})
				</div>
				<div id="content" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title: "Content",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "\"\"",
								Description: "Unique identifier for the content element",
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "\"\"",
								Description: "Additional CSS classes to apply to the content",
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "nil",
								Description: "Additional HTML attributes to apply to the content",
							},
							{
								Name:        "Placement",
								Type:        "dropdown.Placement",
								Default:     "PlacementBottomStart",
								Description: "Position of the dropdown relative to trigger (e.g., PlacementBottomEnd, PlacementTopStart)",
							},
						},
					})
				</div>
				<div id="group" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title: "Group",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "\"\"",
								Description: "Unique identifier for the group element",
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "\"\"",
								Description: "Additional CSS classes to apply to the group",
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "nil",
								Description: "Additional HTML attributes to apply to the group",
							},
						},
					})
				</div>
				<div id="label" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title: "Label",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "\"\"",
								Description: "Unique identifier for the label element",
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "\"\"",
								Description: "Additional CSS classes to apply to the label",
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "nil",
								Description: "Additional HTML attributes to apply to the label",
							},
						},
					})
				</div>
				<div id="item" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title: "Item",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "randomID",
								Description: "Unique identifier for the item element",
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "\"\"",
								Description: "Additional CSS classes to apply to the item",
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "nil",
								Description: "Additional HTML attributes to apply to the item",
							},
							{
								Name:        "Disabled",
								Type:        "bool",
								Default:     "false",
								Description: "Whether the item is disabled",
							},
							{
								Name:        "Href",
								Type:        "string",
								Default:     "\"\"",
								Description: "URL to navigate to when item is clicked (renders as anchor)",
							},
							{
								Name:        "Target",
								Type:        "string",
								Default:     "\"\"",
								Description: "Target attribute for anchor items",
							},
							{
								Name:        "PreventClose",
								Type:        "bool",
								Default:     "false",
								Description: "Whether to prevent dropdown from closing when item is clicked",
							},
						},
					})
				</div>
				<div id="separator" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title: "Separator",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "\"\"",
								Description: "Unique identifier for the separator element",
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "\"\"",
								Description: "Additional CSS classes to apply to the separator",
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "nil",
								Description: "Additional HTML attributes to apply to the separator",
							},
						},
					})
				</div>
				<div id="shortcut" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title: "Shortcut",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "\"\"",
								Description: "Unique identifier for the shortcut element",
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "\"\"",
								Description: "Additional CSS classes to apply to the shortcut",
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "nil",
								Description: "Additional HTML attributes to apply to the shortcut",
							},
						},
					})
				</div>
				<div id="sub" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title: "Sub",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "randomID",
								Description: "Unique identifier for the submenu container",
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "\"\"",
								Description: "Additional CSS classes to apply to the submenu container",
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "nil",
								Description: "Additional HTML attributes to apply to the submenu container",
							},
						},
					})
				</div>
				<div id="subtrigger" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title: "SubTrigger",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "\"\"",
								Description: "Unique identifier for the submenu trigger",
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "\"\"",
								Description: "Additional CSS classes to apply to the submenu trigger",
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "nil",
								Description: "Additional HTML attributes to apply to the submenu trigger",
							},
						},
					})
				</div>
				<div id="subcontent">
					@modules.APITable(modules.APITableProps{
						Title: "SubContent",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "\"\"",
								Description: "Unique identifier for the submenu content",
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "\"\"",
								Description: "Additional CSS classes to apply to the submenu content",
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "nil",
								Description: "Additional HTML attributes to apply to the submenu content",
							},
						},
					})
				</div>
			}
		}
	}
}
